<template>
  <!--招标详情-->
  <div class="tender-tender-list">
    <!--headerContent-->
    <page-layout title="XXX招标" :logo="logo">
      <detail-list slot="headerContent" size="small" :col="2" class="detail-layout">
        <detail-list-item v-for="key in Object.keys(tenderMapper)" :term="tenderMapper[key]">
          <span v-if="key!=='tenderOpenFile'">{{key==='endTime'?dateTimeFormat(parseInt(tender[key])):tender[key]}}</span>
          <el-link v-else type="primary" :href="tender[key]" target="_blank">{{tender[key]?(tender[key].split('/'))[tender[key].split('/').length-1]:null}}</el-link>
        </detail-list-item>
      </detail-list>
      <!--extra-->
      <a-row slot="extra" class="status-list">
        <a-col :xs="24" :sm="24">
          <div class="text">参标厂商</div>
          <div class="heading">{{tenderer.length}}</div>
        </a-col>
      </a-row>

      <a-card title="参标信息" :bordered="false" >
        <a-table
          size="middle"
          ref="tendererTable"
          :rowKey="record => record.id"
          :loading="tendererTable.loading"
          :data-source="tendererTable.dataSource"
          :pagination="pagination"
          :scroll="{ x: 1200 }"
        >

        </a-table>
      </a-card>
    </page-layout>
  </div>
</template>

<script>
  import "@/styles/auto-style.css"
  import { getAction, postActionByQueryString, postActionByJson } from "@/api/manage"
  import { dateTimeFormat, dateFormat } from '@/utils/format'
  import elDragDialog from '@/directive/el-drag-dialog'
  import PageLayout from '@/components/Page/PageLayout'
  import DetailList from '@/components/Page/DetailList'

  const DetailListItem = DetailList.Item

  export default {
    directives: { elDragDialog },
    components: {
      PageLayout,
      DetailList,
      DetailListItem
    },
    data() {
      const tenderMapper = {
        projectName: '项目',
        liablePerson: '责任人',
        tenderOpenContent: '开标信息',
        tenderOpenFile: '开标信息文件',
        endTime: '截至时间',
        tenderWinner: '中标人',
      }
      return {
        logo: require('@/assets/images/tender-logo.png'),
        tender: {}, // 招标信息
        tenderer: [], // 参标信息

        tendererTable: {
          loading: false,
          dataSource: [],

        },

        pagination: {
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50'],
          current: 1,
          pageSize: 10,
          total: 0,
          onChange: (item) => {
            this.pagination.current = item
            this.toSearch()
          },
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          onShowSizeChange: (current, pageSize) => {
            this.pagination.pageSize = pageSize
          },
        },

        detailList: [],
        url: {
          selectByTenderId: '/tender/tenderer/selectByTenderId',
        },
        tenderMapper,
      }
    },
    created() {
      if (this.$route.query){
        this.tender = this.$route.query
        this.selectByTenderId(this.tender.id)
      }
    },
    methods: {
      selectByTenderId(id) {
        getAction(this.url.selectByTenderId, { tenderId: id}).then(resp=>{
          this.tenderer = resp.data
        })
      },
      dateTimeFormat
    }
  }
</script>

<style lang="scss" scoped>
  .tender-tender-list {
    /deep/.el-form-item__content{
      height:auto;
      line-height:32px;
      margin-left:90px!important
    }
    .heading {
      font-size: 24px;
      font-weight: 600;
    }
  }
</style>
